<template>
  <div class="index">
    <Header></Header>
    <div class="main" style="min-width:1300px;">
      <p class='current-nav'>当前位置 : <router-link to='index'>首页</router-link> <i> > </i> 应急预案编制</p>

      <div class="infor editplan">
     <!-- <a href="javascript:POBrowser.openWindowModeless('http://127.0.0.1:8011/word','width=1200px;height=800px;');">打开文件 </a> -->
        <ul class="epList">
            <li><router-link to="estimate">风险/应急资源评估</router-link></li>
            <li><router-link to="editplan" class="active">应急预案编制</router-link></li>
        </ul>
        <dl>
          <dt class="dl-btn"><i class="el-icon-info"></i> 温馨提示</dt>
          <dd>根据贵单位的信息录入情况,尤其是风险评估结果,从应急预案库中为贵单位推荐了下列应急预案:</dd>
          <dd>(1)系统已针对每个风险为企业生成了对应的应急预案模板，您可以点击<span class="dl-btn edit"><i class="el-icon-edit-outline"></i> 编辑</span>在模板上进行修改，保存后形成企业自己的应急预案。</dd>
          <dd>(2)请您再三确认风险信息已全部录入完成,您就可以全选再点击<span class="dl-btn sure"><i class="el-icon-document"></i> 预案汇总</span>即可按步骤生成应急预案汇编。</dd>
        </dl>
        <el-button class='sure sure1' @click="donum"
                   style='margin-left:100px;'><i class="el-icon-document"></i> 预案汇总</el-button>
        <div class="selectLs">已选个数（<span>{{selectNumber}}</span>）</div>
        <div class="form-container">
          <el-table ref="multipleTable"
                    :data="dataList"
                    tooltip-effect="light"
                    border
										v-loading.fullscreen.lock="loading"
                    v-loading.lock="loadings"
                    :element-loading-text="wordmsg"
                     element-loading-spinner="el-icon-loading"
                     :element-loading-background="loadingstyle"
                    @selection-change="handleSelectionChange"
                    width="1100px"
                     :row-key="getRowKeys"
                    >

            <el-table-column type="index"
                             align='center'
                             label='序号'
                             width="100">
                             <template slot-scope='scope'>
									{{(pageIndex-1)*pageSize+scope.$index+1}}
								</template>
            </el-table-column>
            <el-table-column label=''
                             type="selection"
                             :reserve-selection="true"
                             width="50"
                             align='center'>
            </el-table-column>
            <el-table-column prop="planCategory"
                             label="应急预案类别"
                              :show-overflow-tooltip="true"
                             align='center'
                             >
                             <template slot-scope="scope">
                              <span>{{scope.row.planCategory|changeType}}</span>
                             </template>
            </el-table-column>

           <!-- <el-table-column prop="newTemplateName"
                             label="应急预案模板"
                             width="223"
                             :show-overflow-tooltip="true"
                             align='center'>
            </el-table-column>-->


            <el-table-column prop="planName"
                             label="企业应急预案"
                             :show-overflow-tooltip="true"
                             align='center'>
            </el-table-column>
            <el-table-column
            prop="address"
            label="操作"
            :show-overflow-tooltip="true"
            width="200px"
            align='center'
            >
                <template slot-scope="scope">
                  <div class="newmsg" title="请安装pageOffice">
										  <iframe :src="$baseUrl+'/emergency/index/'+scope.row.id" width="70" height="40" frameborder="0"></iframe>
									</div>
                  <!--<el-button size="small"><i class="el-icon-delete"></i>删除</el-button>-->
                  <el-button  @click='lookstatus(scope.row)'><i class="el-icon-search"></i>查看</el-button>
              </template>
            </el-table-column>


          </el-table>

          <div class="page-container">
            <el-pagination
                        @current-change="getNewList"
                        :current-page.sync="pageIndex"
                        :page-size="pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="total">
            </el-pagination>
            <el-button>确定</el-button>
          </div>
        </div>
      </div>
      <!-- <iframe width="100%"
                src=this.$baseUrl+"emergency/index/1xal1f"
                height="500">
        </iframe> -->
    </div>
    <Footer />
  </div>
</template>
<script>
import Header from '../common/header'
import Footer from '../common/footer'
// import "../../../static/js/pageoffice.js"
export default {
  components: {
    Header,
    Footer
  },
  data () {
    return {
      dialogVisible: false,
      uploadType: [
        '上传内部应急组织机构', '上传外部应急救援队伍', '上传应急物资装备', '上传应急救援协议'
      ],
      modeType: [
        '内部应急组织机构',
        '外部应急救援队伍',
        '应急物资装备'
      ],
      activeIndex2: -1,
      activeIndex: -1,
      formInline: {
        user: '',
        region: '',
      },
      dataList:[],
      pageIndex:1,
      pageSize:5,
      total:0,
      multipleSelection:[],
      innnerH:"11111111111111111111111",
			loading:false,
      wordmsg:"",
      selectNumber:0,
      loadings:true,
      loadingstyle:''
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
    },
    onSubmit () {
      console.log('submit!');
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
        this.selectNumber = this.multipleSelection.length;
    },
    resetForm (formName) {
      //				this.$refs[formName].resetFields();
      this.$router.push('risk')
    },
    getNewList () {
      let params = {
        "companyId": JSON.parse(localStorage.getItem('user')).companyId,
        "pageIndex": this.pageIndex,
        "pageSize": this.pageSize
      }
      this.$axios
        ({
          method: 'post',
          url: this.$baseUrl+"emergency/v1.0/plan/list",
          data: params
        }).then(
          (res) => {
            this.loadings =false;
             this.dataList = res.data.data.records;
             this.total = res.data.data.total;
             console.log( this.dataList )
          })
    },
    donum(){
        let arr = [];
         this.multipleSelection.forEach(
             (item) =>{
                 arr = [...arr,item.id]
             }
         )
         let planIds = arr.join(",")
         let params = {
              "companyId":JSON.parse(localStorage.getItem('user')).companyId,
              "planIds": planIds,
              "userName":JSON.parse(localStorage.getItem('user')).userAccount
         };
          if(arr.length<2){
            this.$message({
                message: "请至少选择所需的两条应急预案",
                type: 'error'
             });
             return false;
         }
          let a1 = 0;
      this.wordmsg = "文档生成中，请耐心等待...已加载0%"
       this.loadingstyle='rgba(0,0,0,0.8)';
			this.loading = true;
      setTimeout(
        ()=>{
           this.wordmsg = "文档生成中，请耐心等待...  已加载 10%"
        },3000
      )
      setTimeout(
        ()=>{
           this.wordmsg = "文档生成中，请耐心等待...  已加载 20%"
        },6000
      )
      setTimeout(
        ()=>{
           this.wordmsg = "文档生成中，请耐心等待...  已加载 30%"
        },15000
      )
      setTimeout(
        ()=>{
           this.wordmsg = "文档生成中，请耐心等待...  已加载 50%"
        },25000
      )
      setTimeout(
        ()=>{
           this.wordmsg = "文档生成中，请耐心等待...  已加载 70%"
        },45000
      )
            this.$axios
        ({
          method: 'post',
          url: this.$baseUrl+"emergency/v1.0/plan/summary",
          data: params
        }).then(
          (res) => {
						this.loading = false;
                if (res.data.meta.success) {
                  this.$message({
                    message: "保存成功",
                    type: 'success'
                  });
                } else {

                  this.$message({
                    message: res.data.meta.message,
                    type: 'error'
                  });
                }
                this.$router.push("/planmanage")
          })
    },
     getRowKeys(row){
        return row.id;
      },
      lookmsg(item){
         let url = item.newTemplateFile;
        //  var tempwindow=window.open('_blank');//打开一个窗口，然后用

        //   tempwindow.location=url;//使这个窗口跳转到百度，这样就会呈现弹出百度窗口的效果了。

                  const elink = document.createElement('a')
                  elink.style.display = 'none';
                  elink.target = '_blank';
                  elink.href=url;
                  document.body.appendChild(elink)
                  elink.click()
                  document.body.removeChild(elink)
                  // const { href } = this.$router.resolve({name:"templete",query:{"url":url}});
                  // window.open(href, '_blank');
      },
      todosummay(){
         let arr = [];
         this.multipleSelection.forEach(
             (item) =>{
                 arr = [...arr,item.riskId]
             }
         )
         let riskIds = arr.join(",")
         let params = {
              "companyId":JSON.parse(localStorage.getItem('user')).companyId,
              "riskIds": riskIds,
              "userName":JSON.parse(localStorage.getItem('user')).userAccount
         };



         this.$axios
        ({
          method: 'post',
          url: this.$baseUrl+"emergency/v1.0/plan/summary",
          data: params
        }).then(
          (res) => {
            if (res.data.meta.success) {
              this.$message({
                message: "预案汇总成功",
                type: 'success'
              });
              this.lookdetailrecord();
            } else {
              this.$message({
                message: res.data.meta.message,
                type: 'error'
              });
            }
          }
        )

      },
      getWordmsg(){
        //  POBrowser.openWindowModeless('http://yjyaapi-sit.bosafe.com/emergency/v1.0/view/word/'+id,'width=1200px;height=800px;');
         let  id = "1xal1f";
        this.$axios({
          method: 'get',
          url: this.$baseUrl+"emergency/v1.0/view/word/"+id,
          data: {}
        }).then(
          (res) => {
               this.innnerH = res.data.data.pageoffice;
          }
        )
      },
      lookstatus(item){
          let  baseUrl = item.newTemplateFile;
          var urlpath = baseUrl.indexOf("?") + 1;
          urlpath = baseUrl.substring(urlpath);
          var arrapi = urlpath.split("&");
          let  uesrMessage = {}
          arrapi.forEach(
              (item)=>{
                  var brrapi = [];
                  brrapi = item.split("=");
                  uesrMessage[brrapi[0]] = brrapi[1];
              }
          )

          let id = uesrMessage.srcFid;
          let  expires = Date.parse(new Date());
          let a = "FastDFS1234Bossien"+id +expires
          console.log(a);
          let token = this.$md5(a)
          token = token.toUpperCase()
          let that = this;
          $.ajax({
              url:this.$baseUrl3+"/queryPublishFileInfo.do?appId=001&srcFid="+id+"&expires="+expires+"&token="+token,
              type:'GET', //GET
              async:false,    //或false,是否异步
              data:{
              },
              timeout:5000,    //超时时间
              success:function(data,textStatus,jqXHR){
                let status = JSON.parse(data);
                if(!status.success){
                    that.$message({
                    message: "正常，流媒体转码中，要等待",
                    type: 'error'
                    });
                    return false;
                }
                if(status.dataObj.srcFileStatusName=="12"){
                    that.lookmsg(item)
                }else{
                    that.$message({
                    message: "正常，流媒体转码中，要等待",
                    type: 'error'
                  });
                }
              },
              error:function(xhr,textStatus){
              },
              complete:function(){
              }
          })
          // this.$axios({
          //   method: 'get',
          //   // url:"/queryPublishFileInfo.do?appId=001&scrFid="+id+"&expires="+expires+"&token="+token,
          //   url:"/queryPublishFileInfo.do?appId=001&srcFid="+id+"&expires="+expires+"&token="+token,
          //   data: {}
          // }).then(
          //   (res) => {
          //       // debugger;
          //       let status = JSON.parse(res.data);
          //       if(status.dataObj.srcFileStatusName=="12"){
          //           this.lookmsg(item)
          //       }else{
          //           this.$message({
          //           message: "文件正在转码中，请稍后有查看",
          //           type: 'error'
          //         });
          //       }

          //   }
          // )
      }
  },
  created() {
    this.getNewList();
    // this.lookstatus();
  },
  filters:{
     changeType(val){
       if(!val){
         return "";
       }
       if(val==1){
         return "综合预案"
       }else if(val==2){
         return "专项预案"
       }else if(val==3){
         return "现场处置方案"
       }
     }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
@import "../../../static/css/information.less";
.editplan {
    .epList {
        width: 370px;
        margin: 70px auto;
        height: 42px;
        border: 1px solid #4080ff;
        border-radius: 8px;
        li {
            float: left;
            width: 50%;
            a {
                display: block;
                color: #666;
                height: 40px;
                text-align: center;
                line-height: 40px;
            }
            a.active {
                color: #fff;
                background: #4080ff;
            }
            a.active:hover {
                color: #fff;
            }
            a:hover {
                color: #4080ff;
            }
        }
        li:first-child {
            a {
                border-radius: 6px 0 0 6px;
            }
        }
        li:last-child {
            a {
                border-radius: 0 6px 6px 0;
            }
        }
    }
  dl {
    margin-left: 100px;
    font-size: 14px;
    .dl-btn {
      display: inline-block;
      padding: 0 10px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      border-radius: 6px;
      text-align: center;
      margin-bottom: 14px;
    }
    dt.dl-btn {
      background: #f6f9ff;
      color: #3f80ff;
    }
    dd {
      margin-bottom: 24px;
      color: #808080;
      .dl-btn {
        margin: 0 16px;
        color: #fff;
      }
      .dl-btn:hover{
          opacity: 1;
      }
      .edit {
        background: #f6f9ff;
        color: #3f80ff;
      }
    }
  }
  .sure1:hover {
    opacity: 0.8;
    color: #fff;
  }
  .el-button.sure.sure1{
    color: #fff;
    background: #4080ff;
    background: linear-gradient(90deg, #6eb1ff 20%, #3372ff 80%);
  }
  .form-container {
    padding: 0 0 10px;
    margin: 0 auto;
    min-width:1100px;
    .el-table {
      width: calc(100% - 200px);
      margin: 0 auto;
      border-top: 1px solid #ebeef5;
      min-width:1100px;
      margin-left: 100px;
      td {
        padding: 0;
        height: 48px;
        line-height: 48px;
      }
      .div-edit {
        padding: 0 10px;
        a {
          float: left;
          text-decoration: underline;
          color: #3f80ff;
          line-height: 48px;
        }
        .el-button {
          float: right;
          color: #3f80ff;
          background: #f6f9ff;
          border: 0;
          margin: 5px 0 0 10px;
        }
      }
    }
    .page-container {
      width: 620px;
      margin: 50px auto;
      padding: 0;
    }
  }
}
.newmsg{
	width:70px;
	height:40px;
    float: right;
}
.selectLs{
      height: 40px;
    width: 200px;
    /* float: left; */
    margin-left: 100px;
    margin-top: 30px;
    line-height: 40px;
    >span{
        color: #409EFF;
    }
}
</style>
